<template>
  <div class="home h100">
    <header>标题</header>

    <main>
      <h1>我自己</h1>
      <router-view />
    </main>

    <footer>
      <!-- router-link 必须要传递to 指向 去的位置 -->
      <!-- tag (指定 router-link 变成什么标签) -->

      <!-- 声明式跳转 -->
      <router-link exact active-class="active" 
      tag="span"
       to="/home">
       首页
      </router-link>
      <!-- exact 精准匹配 -->
      <router-link exact active-class="active" 
       tag="span"
        to="/home/one">
        列表</router-link>
      <router-link exact active-class="active"
       tag="span" 
       to="/home/two">
       我的
       </router-link>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style>
.home {
  display: flex;
  flex-direction: column;
}
header {
  text-align: center;
  line-height: 46px;
}
main {
  flex: 1;
}
footer {
  text-align: center;
  line-height: 46px;
  display: flex;
}
footer span {
  flex: 1;
}
</style>
